<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>Insert title here</title>
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
	rel="stylesheet" />
<link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">	
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script th:src="@{/layer/layer.js}"></script>
</head>
<body>
	<div class="container-fluid" id="app">
		<h5 class="text-center bg-info text-white p-2">蜗牛-DEMO</h5>
		<div class="row mt-3 shadow">
			<div class="col">
				<div class="form-inline">
					<input type="text" id="depart" class="form-control form-control-sm" placeholder="请输入院系"/>
					<input type="text" id="sex" class="form-control form-control-sm ml-2" placeholder="请输入性别" />
					<button class="btn btn-sm btn-outline-info ml-2" @click="showdata();">查询</button>
					<button title="各科平均成绩" class="btn btn-sm btn-outline-warning ml-2" @click="report01();">报表1</button>
				</div>
			</div>			
		</div>
		<div class="row mt-3">
				<div class="col">
					<table class="table table-striped">
						<tr v-for="s in studentdata">
							<td>{{s.id}}</td>
							<td>{{s.name}}</td>
							<td>{{s.sex}}</td>
							<td>{{s.department}}</td>
							<td>{{s.address}}</td>
						<td><button title="个人信息查询" class="btn btn-sm btn-warning mr-2"><i class="fa fa-address-card-o"></i></button><button title="删除" class="btn btn-sm btn-danger" @click="del(s.id)"><i class="fa fa-trash"></i></button></td>										
						</tr>
					</table>
				</div>
			</div>
	</div>
	<script>
		var app = new Vue({
			el:"#app",
			data : {
				studentdata:[]				
			},
			methods : {
				showdata : function(){
					$.post(
							"/student/selectAll",
							{depart : $("#depart").val(),sex : $("#sex").val()},
						function(data){								
								app.studentdata = data;
							}							
					);
				},
				report01 : function() {
					//弹窗
					layer.open({
						type : 2,
						content : "/score/toReport01",
						area : [ "60%", "99%" ]
					});
				},
				del : function(id){
					layer.confirm("确定删除吗?",function(){
						$.post(
								"/student/del",
								{id:id},
								function(data){
									layer.msg(data);									
								}
							);
					});
				}
			}			
					
		});
		/* function showdata(){			
			$.post(
				"/student/selectAll",				
				function(data){	
					$.each(data,function(i,n){
						var str="";
						str += "<tr>";
						str += "<td>'"+n.id+"'</td>";
						str +="<td>'"+n.name+"'</td>";
						str +="<td>'"+n.sex+"'</td>";
						str +="<td>'"+n.department+"'</td>";
						str +="<td>'"+n.address+"'</td>";
						str +="</tr>";
						$("#t").append(str);
					});
				}
			); 
		}  */
	
	</script>
</body>
</html>